<template xmlns="http://www.w3.org/1999/html">
    <div class="app-container">
        <!-- 左侧 -->
        <div class="left">
            <div class="put">
                <el-input placeholder="请输入PLC名称" v-model="plc_name" prefix-icon="el-icon-search" @change="getPLCName($event)" clearable></el-input>
            </div>
            <div class="table">
                <el-table :data="plcList"  @row-click="handleSelectionChange" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                    :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '13px', 'text-align': 'left' }"
                    :row-style="{ height: '40px', background: '#000224', width: '100%', fontSize: '13px', color: '#bdbdc2', 'text-align': 'left' }"
                    :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
                    <el-table-column prop="plc_name" label="名称" width="70%">
                        <template slot-scope="scope">
                            <div style="font-size: 12px;display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: left;">
                                <div v-if="scope.$index + 1 == 1"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#a64317; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 == 2"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#a67c17; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 == 3"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#9aa617; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <div v-if="scope.$index + 1 >= 4"
                                    style=" display: flex; justify-content: center;align-items: center;  width:16px; background-color:#64a617; height: 16px; border-radius: 9px; color: #fff; margin: 2px 3px 0 0 ;">
                                    {{ scope.$index + 1 }}</div>
                                <p>{{scope.row.plc_name}}_{{scope.row.robot_name}}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="plc_state" label="状态" width="30%">
                        <template slot-scope="scope">
                            <i class="el-icon-error" v-if="scope.row.plc_state === 0"
                                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                            <i class="el-icon-success" v-else
                                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
            <!-- 头部 -->
          <div>  <!--div class="right-header">-->
                <p style=" width: 211px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #E9E9E9;" id="plctitle" >PLC操作面板</p>
            </div>
            <!-- 显示参数 -->
            <div class="right-center">
                <div class="right-title">
                    <p>显示参数</p>
                    <span></span>
                </div>
                <div class="right-conter">
                    <div class="centerBox">
                       <div class="centerBox1">
                        <p>提升装置上限位</p>
                        <p>{{tsjsxw}}</p>
                       </div>
                       <div class="centerBox1">
                        <p>直轨到位信号</p>
                        <p style="color:#e85e09">{{zgdwxh}}</p>
                       </div>
                       <div class="centerBox1">
                        <p>提升机下降运行</p>
                        <p>{{tsjxjyx}}</p>
                       </div>
                       <div class="centerBox1">
                        <p>1#AP电源停止供电</p>
                        <p>{{dytzgd1}}</p>
                       </div>
                    </div>
                    <div class="centerBox">
                        <div class="centerBox1">
                         <p>充电桩到位信号1</p>
                         <p>{{cdzdwxh1}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>弯轨到位信号</p>
                         <p style="color:#e85e09">{{wgdwxh}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>提升机上升运行</p>
                         <p>{{tsjssux}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>2#AP电源启动供电</p>
                         <p>{{dydyqdgd2}}</p>
                        </div>
                    </div>
                    <div class="centerBox">
                        <div class="centerBox1">
                         <p>充电桩到位信号2</p>
                         <p>{{cdzdwxh2}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>弹松开检测</p>
                         <p>{{tsjthsk}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>1#AP电源启动供电</p>
                         <p>{{dydyqdgd1}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>2#AP电源停止供电</p>
                         <p>{{dytzgd2}}</p>
                        </div>
                    </div>
                    <div class="centerBox">
                        <div class="centerBox1">
                         <p>机器人到位信号1</p>
                         <p style="color: #e85e09">{{tsjjqrdwxh1}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>提升机下降到位</p>
                         <p  style="color: #e85e09">{{tsjxjdw2}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>电动门关到位</p>
                         <p style="color: #e85e09">{{ddmgdw}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>电动门停止</p>
                         <p>{{ddmtz}}</p>
                        </div>
                    </div>
                    <div class="centerBox">
                        <div class="centerBox1">
                         <p>机器人到位信号2</p>
                         <p style="color: #e85e09">{{tsjjqrdwxh2}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>提升机上升到位</p>
                         <p  style="color: #e85e09">{{tsjssdw1}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>电动门开到位</p>
                         <p style="color: #e85e09">{{ddmkdw}}</p>
                        </div>
                        <div class="centerBox1">
                         <p>提升机停止</p>
                         <p>{{tsjtz}}</p>
                        </div>
                     </div>
                </div>
            </div>
            <!-- 公共操作 -->
            <div class="right-bottom">
                <div class="bottom-title">
                    <p>公共操作</p>
                    <span></span>
                </div>
                <div class="bottom-center">
                    <div class="bottom-centerBox1" v-hasPermi="['robot:tsj:view']">
                        <div class="centerBox-sjj">
                            <p>提升机</p>
                            <span></span>
                        </div>
                        <div class="sjj-btn">
                            <el-button class="sjj-btn1" size="mini" @click="tsjs()">提升机(升)</el-button>
                            <el-button class="sjj-btn2" size="mini" @click="tsjj()">提升机(降)</el-button>
                            <el-button class="sjj-btn3" size="mini" @click="tsjzt()">提升机(停止)</el-button>
                        </div>
                    </div>
                    <div class="bottom-centerBox2" v-hasPermi="['robot:bg:view']">
                        <div class="centerBox-bg">
                            <p>变轨</p>
                            <span></span>
                        </div>
                        <div class="bg-btn">
                            <el-button class="bg-btn1" size="mini" @click="bzg()">变直轨</el-button>
                            <el-button class="bg-btn2" size="mini" @click="bwg()">变弯轨</el-button>
                            <el-button class="bg-btn3" size="mini" @click="bgtz()">变轨停止</el-button>
                        </div>
                    </div>
                    <div class="bottom-centerBox3" v-hasPermi="['robot:ddm:view']">
                        <div class="centerBox-ddm">
                            <p>电动门</p>
                            <span></span>
                        </div>
                        <div class="ddm-btn">
                            <el-button class="ddm-btn1" size="mini" @click="ddmk()">电动门(开)</el-button>
                            <el-button class="ddm-btn2" size="mini" @click="ddmg()">电动门(关)</el-button>
                            <el-button class="ddm-btn3" size="mini" @click="ddmzt()">电动门(停止)</el-button>
                        </div>
                    </div>
<!--                    <div class="bottom-centerBox4">-->
<!--                        <div class="centerBox-dy">-->
<!--                            <p>电源</p>-->
<!--                            <span></span>-->
<!--                        </div>-->
<!--                        <div class="dy-btn">-->
<!--                            <el-button class="dy-btn1" size="default" @click="dygd1()">1#AP电源启动</el-button>-->
<!--                            <el-button class="dy-btn2" size="default" @click="dygd1tz()">1#AP电源停止</el-button>-->
<!--                            <el-button class="dy-btn3" size="default" @click="dygd2()">2#AP电源启动</el-button>-->
<!--                            <el-button class="dy-btn4" size="default" @click="dygd2tz()">2#AP电源停止</el-button>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {listsPlc} from "@/api/robot/plc/plc";
import {
  bgtzCmd,
  bwgCmd,
  bzgCmd,
  ddmkCmd,
  ddmztCmd,
  dmgCmd,
  dygd1Cmd,
  dygd2Cmd,
  dygdtz1Cmd,
  dygdtz2Cmd,
  plcdataCmd,
  sjjjCmd,
  sjjsCmd,
  sjjtzCmd
} from "@/api/robot/modbus/modbus";
import $ from "jquery";
export default {
    data() {
        return {
          timer: null,//定时器
          plc_name: undefined,
          //控制机器人的滚动条
          isDologin: false,
          tsjsxw:'无',//提升装置上限位
          cdzdwxh1:'无',//充电桩机器人到位信号1
          cdzdwxh2:'无',//充电桩机器人到位信号2
          tsjjqrdwxh1:'无',//提升装置到位信号1
          tsjjqrdwxh2:'无',//提升装置到位信号2
          zgdwxh:'无',//变轨装置直轨到位信号
          wgdwxh:'无',//变轨装置弯轨到位信号
          tsjthsk:'无',//弹簧松开检测
          tsjssux:'无',//提升机上升运行
          tsjssdw1:'无',//提升装置轨道到位1（上升到位）
          tsjxjdw2:'无',//提升装置轨道到位2（下降到位）
          tsjxjyx:'无',//提升机下降运行
          ddmkdw:'无',//电动门开到位
          ddmgdw:'无',//电动门关到位
          dydyqdgd1:'无',//1#AP电源启动供电
          dydyqdgd2:'无',//2#AP电源启动供电
          dytzgd1:'无',//1#AP电源停止供电
          dytzgd2:'无',//2#AP电源停止供电
          ddmtz:'无',//电动门停止
          tsjtz:'无',//提升机停止
          //plc列表数据
          plcList: [],
          queryParams:{
             plc_name: undefined
          },
          queryParams1:{
             plcid: undefined
          }
       }
   },
  created() {
    //初始化页面加载方法
    this.getList(); //plc列表
    this.plcreadata();//plc实时数据
  },
  beforeDestroy() {
    //清除定时器
    if(this.timer) {
      clearInterval(this.timer); //关闭
    }
  },
  mounted() {
    //加载完页面加载方法
    $("#plctitle").text(localStorage.getItem("plc_title") == null ? "PLC面板" : localStorage.getItem("plc_title"));//plc标题
    //定时器轮询程序
    this.timer = setInterval(()=>{
      this.plcreadata();//plc实时数据
      this.getList(); //plc列表
      console.log("plc控制面板定时")
    },2000);//2000毫秒
  },
  methods: {
    /** 根据输入框plc名称，查询plc列表 */
    getPLCName(plc_name) {
      this.queryParams.plc_name = plc_name;
      this.getList();
    },
    /** 查询plc列表 */
    getList() {
      this.loading = true;
      listsPlc(this.queryParams).then(response => {
        this.plcList = response.rows;
      });
    } ,
    //根据当前plc查询plc数据
    handleSelectionChange(row) {
      localStorage.removeItem("plcid");//删除
      localStorage.removeItem("plc_title");//删除
      localStorage.setItem("plcid",row.robot_config_id+"_"+row.plc_num);//存储plcid
      localStorage.setItem("plc_title", row.plc_name+'_'+row.robot_name+'面板 ');//存储pic标题
      $("#plctitle").text(localStorage.getItem("plc_title"));//plc名称标题
    },
    enter() {
      this.isDologin = true;
    },
    leave() {
      this.isDologin = false;
    },
    // 定时刷新plc实时数据
    plcreadata() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      if(typeof(this.queryParams1.plcid) != "undefined" && this.queryParams1.plcid != null && this.queryParams1.plcid!="") {
        plcdataCmd(this.queryParams1).then(response => {
          if (typeof response.data != "undefined" && response.data != null) {
            this.tsjsxw = "---"; //提升装置上限位
            this.cdzdwxh1 =response.data.cdzdwxh1; //充电桩机器人到位信号1
            this.cdzdwxh2 =response.data.cdzdwxh2; //充电桩机器人到位信号2
            this.tsjjqrdwxh1 = response.data.tsjjqrdwxh1; //提升装置到位信号1
            this.tsjjqrdwxh2 = response.data.tsjjqrdwxh2; //提升装置到位信号2
            this.zgdwxh = "---"; //变轨装置直轨到位信号
            this.wgdwxh = "---"; //变轨装置弯轨到位信号
            this.tsjthsk ="---";//弹簧松开检测
            this.tsjssux = response.data.tsjssux;//提升机上升运行
            this.tsjssdw1 = response.data.tsjssdw1;//提升装置轨道到位1（上升到位）
            this.tsjxjdw2 = response.data.tsjxjdw2;//提升装置轨道到位2（下降到位）
            this.tsjxjyx = response.data.tsjxjyx;//提升机下降运行
            this.ddmkdw = response.data.ddmkdw;//电动门开到位
            this.ddmgdw = response.data.ddmgdw;//电动门关到位
            this.dydyqdgd1 = response.data.dydyqdgd1;//1#AP电源启动供电
            this.dydyqdgd2 = response.data.dydyqdgd2;//2#AP电源启动供电
            this.dytzgd1 = response.data.dytzgd1;//1#AP电源停止供电
            this.dytzgd2 = response.data.dytzgd2;//2#AP电源停止供电
            this.ddmtz = "---";//电动门停止
            this.tsjtz = "---";//提升机停止
          } else {
            this.tsjsxw = "无"; //提升装置上限位
            this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
            this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
            this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
            this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
            this.zgdwxh = "无"; //变轨装置直轨到位信号
            this.wgdwxh = "无"; //变轨装置弯轨到位信号
            this.tsjthsk = "无";//弹簧松开检测
            this.tsjssux = "无";//提升机上升运行
            this.tsjssdw1 ="无";//提升装置轨道到位1（上升到位）
            this.tsjxjdw2 = "无";//提升装置轨道到位2（下降到位）
            this.tsjxjyx = "无";//提升机下降运行
            this.ddmkdw = "无";//电动门开到位
            this.ddmgdw ="无";//电动门关到位
            this.dydyqdgd1 = "无";//1#AP电源启动供电
            this.dydyqdgd2 = "无";//2#AP电源启动供电
            this.dytzgd1 = "无";//1#AP电源停止供电
            this.dytzgd2 = "无";//2#AP电源停止供电
            this.ddmtz = "无";//电动门停止
            this.tsjtz = "无";//提升机停止
          }
        });
      } else {
        this.tsjsxw = "无"; //提升装置上限位
        this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
        this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
        this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
        this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
        this.zgdwxh = "无"; //变轨装置直轨到位信号
        this.wgdwxh = "无"; //变轨装置弯轨到位信号
        this.tsjthsk = "无";//弹簧松开检测
        this.tsjssux = "无";//提升机上升运行
        this.tsjssdw1 ="无";//提升装置轨道到位1（上升到位）
        this.tsjxjdw2 = "无";//提升装置轨道到位2（下降到位）
        this.tsjxjyx = "无";//提升机下降运行
        this.ddmkdw = "无";//电动门开到位
        this.ddmgdw ="无";//电动门关到位
        this.dydyqdgd1 = "无";//1#AP电源启动供电
        this.dydyqdgd2 = "无";//2#AP电源启动供电
        this.dytzgd1 = "无";//1#AP电源停止供电
        this.dytzgd2 = "无";//2#AP电源停止供电
        this.ddmtz = "无";//电动门停止
        this.tsjtz = "无";//提升机停止
      }
    },//提升机(升)
    tsjs(){
      this.queryParams1.plcid = localStorage.getItem("plcid");
      sjjsCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    },//提升机(降)
    tsjj(){
      this.queryParams1.plcid= localStorage.getItem("plcid");
      sjjjCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    }, //电动门开
    ddmk(){
      this.queryParams1.plcid= localStorage.getItem("plcid");
      ddmkCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    },//电动门关
    ddmg(){
      this.queryParams1.plcid = localStorage.getItem("plcid");
      dmgCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null)this.$modal.msg(response.msg);
      });
    }, //变直轨
    bzg(){
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bzgCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    }, //变弯轨
    bwg(){
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bwgCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    },//电动门暂停
    ddmzt(){
      this.queryParams1.plcid = localStorage.getItem("plcid");
      ddmztCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    }, //提升机(停止)
    tsjzt(){
      this.queryParams1.plcid = localStorage.getItem("plcid");
      sjjtzCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    },//变轨停止
    bgtz(){
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bgtzCmd(this.queryParams1).then(response => {
        if(typeof(response)!=null) this.$modal.msg(response.msg);
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
    width: 100%;
    height: calc(100vh - 35px);
    background: #081a46;
    display: flex;
    justify-content: space-between;
}
*{
    margin: 0;
    //padding: 0;
}
.el-button + .el-button {
    margin-left: 0px;
}

.left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .put {
        width: 98%;
        margin: 10px;
        ::v-deep .el-input {
            width: 100%;
            height: 20px;
        }
        ::v-deep .el-input__inner {
            border: 2px solid #0264bf;
            background-color: #081a46;
            // margin: 10px;
        }
    }
    .table {
        width: 98%;
        height: 200px;
        margin: 10px;
        // margin-top: 20px;
        overflow: auto;
        ::v-deep .el-table__body-wrapper {
            &::-webkit-scrollbar {
                // 整个滚动条
                width: 0px; // 纵向滚动条的宽度
                background: rgba(71, 103, 182, 0.3);
                border: none;
            }
            &::-webkit-scrollbar-track {
                // 滚动条轨道
                border: none;
            }
        }
        .el-table {
            width: 100%;
        }
        ::v-deep .el-table th.gutter {
            display: none;
            width: 0
          }
          ::v-deep .el-table colgroup col[name='gutter'] {
            display: none;
            width: 0;
          }
          ::v-deep .el-table__body {
            width: 100%;
            background-color:#081a46;
            // padding-left: 10px;
          }
          ::v-deep .el-table__body-wrapper{
            width: 100%;
            background-color:#081a46;
          }
          /*滚动条的宽度*/
          .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
            width: 0;
          }

          .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: block;
            width: 0;
          }
          ::v-deep .el-table tr {
            //background-color: transparent;
            border: none;
            // height: 50px;
            width: 100%;
            background-color:#081a46;
          }
          ::v-deep .el-table td {
            //background-color: trannt;
            border: none;
            width: 100%;
            // height: 50px;
            background-color:#081a46;
          }
          // /* 表格内背景颜色 */
          ::v-deep .el-table th {
            background-color: transparent;
            border: none;
            width: 100%;
          }
          // 移入变色
          ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #222448;
          }
    }
    ::v-deep.el-progress-bar__inner {
        background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
        // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
        // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
        // background: linear-gradient(to right, red, blue 70px);
        // stroke-linecap:butt
    }
    .table::-webkit-scrollbar {
        display: none;
        /*隐藏滚动条*/
    }
}
.right {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .right-header {
        width: 98%;
        height: 65px;
        border: 1px solid #2A2E4A;
        border-radius: 4px;
        border-top: none;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #081a46;
        >p{
            width: 211px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #E9E9E9;
        }
    }
    .right-center{
        width: 98%;
        padding: 0%;
        height: 36%;
        margin-top: 1%;
        border: 1px solid #262E63;
        border-radius: 4px;
        .right-title{
            width: 98%;
            margin-left: 2%;
            //margin-bottom: 10px;
            margin-top: 10px;
            >p{
                width: 86px;
                height: 22px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 2px;
            }
            span{
                width: 45px;
                height: 3px;
                margin-left: 1%;
                display: block;
                background: #4691FF;
                border-radius: 2px;
               // margin-bottom: 20px;
            }
        }
        .right-conter{
            width: 98%;
            height: 75%;
            margin-top: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            .centerBox{
                //padding-left: 2%;
                width: 86%;
                //padding: 0%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                //background-color: #108B8F;
                //border: 1px solid #ffff;
                margin-bottom: 30px;
                .centerBox1{
                    width:100%;
                   // padding: -30px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    margin-bottom: 10px;
                    //background-color: #22c2a4;
                   // background-color: #bfc1eb;
                    p:nth-child(1){
                        //margin-top: 10px;
                       display: flex;
                       justify-content: flex-end;
                       align-items: center;
                        width: 107px;
                        height: 17px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        margin-right: 2px;
                    }
                    p:nth-child(2){
                        width: 50px;
                        height: 24px;
                        //margin-left: 2%;
                        background: #0F1A43;
                        border: 2px solid #54619D;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #75bfff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }
    .right-bottom{
        width: 98%;
        height: 60%;
        border: 1px solid #262E63;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        .bottom-title{
            width: 98%;
            height: 10%;
            margin-left: 2%;
            margin-top: 1%;
            >p{
                width: 86px;
                height: 22px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 2px;
            }
            span{
                width: 45px;
                height: 3px;
                margin-left: 1%;
                display: block;
                background: #4691FF;
                border-radius: 2px;
                margin-bottom: 20px;
            }
        }
        .bottom-center{
            width: 98%;
            height: 80%;
            margin-left: 2%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .bottom-centerBox1{
                width: 260px;
                height: 99%;
                background: #061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .centerBox-sjj{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;
                    >p{
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }
                    span{
                        width: 42px;
                        height: 3px;
                        display: block;
                        background: #4691FF;
                        border-radius: 1px;
                    }
                }
                .sjj-btn{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;
                    .sjj-btn1{
                        width: 120px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }
                    .sjj-btn2{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 8%;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #0D1538, #065D70);
                        border: 2px solid #108B8F;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                    .sjj-btn3{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }
            .bottom-centerBox2{
                width: 260px;
                height: 99%;
                background: #061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .centerBox-bg{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;
                    >p{
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }
                    span{
                        width: 30px;
                        height: 3px;
                        display: block;
                        background: #de7018;
                        border-radius: 1px;
                    }
                }
                .bg-btn{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;
                    .bg-btn1{
                        width: 120px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }
                    .bg-btn2{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 8%;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #0D1538, #065D70);
                        border: 2px solid #108B8F;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                    .bg-btn3{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }
            .bottom-centerBox3{
                width: 260px;
                height: 99%;
                background:#061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .centerBox-ddm{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;
                    >p{
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }
                    span{
                        width: 40px;
                        height: 3px;
                        display: block;
                        background: #22c2a4;
                        border-radius: 1px;
                    }
                }
                .ddm-btn{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;
                    .ddm-btn1{
                        width: 120px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }
                    .ddm-btn2{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 8%;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #0D1538, #065D70);
                        border: 2px solid #108B8F;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                    .ddm-btn3{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 120px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }
            .bottom-centerBox4{
                width: 260px;
                height: 100%;
                background: #061640;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .centerBox-dy{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    margin-left: 5%;
                    >p{
                        width: 100%;
                        height: 100%;
                        margin-top: 10px;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #EDEDED;
                    }
                    span{
                        width: 30px;
                        height: 3px;
                        display: block;
                        background: #3152c1;
                        border-radius: 1px;
                    }
                }
                .dy-btn{
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 6%;
                    .dy-btn1{
                        width: 100px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }
                    .dy-btn2{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }
                    .dy-btn3{
                        width: 100px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                        margin-bottom: 8%;
                    }
                    .dy-btn4{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100px;
                        height: 30px;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #EDEDED;
                    }
                }
            }
        }
    }
}
</style>
